<template>
  <el-dialog
      v-model="dialogVisible"
      width="50%"
      :show-close="false"
      custom-class="my-dialog"
  >
    <template #header>
      <div class="header-wrap">
        <span class="title-name">{{title}}</span>
        <img @click="dialogVisible = false" class="close-icon" src="@/assets/iconImg/close.png" />
      </div>
    </template>
      <div class="dialog-content">
        <el-radio-group v-model="radio">
          <el-radio :label="item.contractTemplateId" v-for="(item,index) in templateList" :key="index">{{item.templateName}}</el-radio>
        </el-radio-group>
      </div>
    <template #footer>
      <span class="dialog-footer">
        <div class="dialog-footer-content">
            <img @click="previousPage" class="left-arrow-icon" :style="{cursor:disabledPreviousPage?'pointer !important':'not-allowed !important'}" src="@/assets/iconImg/left_arrow_icon.png">
            <div class="button-wrap">
                <el-button style="padding: 0 25px" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" color="#FF7B50" style="color: #fff;padding: 0 25px" @click="onConfirm">
                  确认
                </el-button>
            </div>
            <img @click="nextPage" class="right-arrow-icon" :style="{cursor:disableNextPage?'pointer !important':'not-allowed !important'}" src="@/assets/iconImg/left_arrow_icon.png">
        </div>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch, computed} from "vue";
import {
  ElDialog,
  ElRadio,
  ElRadioGroup
} from "element-plus";

const props = defineProps({
  is_show_templateDialog:Boolean,
  title:{
    type:String,
    default:()=>{
      return '请选择模板';
    }
  },
  templateList:{
    type:Array,
    default:()=>{
      return []
    }
  },
  pageSize:{
    type:Number,
    default:()=>{
      return 10;
    }
  },
  total:0
});

const current = ref(1);

const emits = defineEmits(['update:is_show_templateDialog','onConfirm']);

const dialogVisible = ref(false);
dialogVisible.value = props.is_show_templateDialog;

watch(()=>props.is_show_templateDialog,(value)=>{
  dialogVisible.value = value;
});
watch(()=>dialogVisible.value,(value)=>{
  emits('update:is_show_templateDialog',value);
});

const radio = ref(null);

watch(()=>props.templateList,()=>{
  radio.value = props.templateList.length===0?[]:props.templateList[0].contractTemplateId.toString();
});

// 计算属性 是否禁用上一页按钮
const disabledPreviousPage = computed(()=>{
  if(current===1){
    return true;
  }
  return false;
});

// 计算属性 是否禁用下一页按钮
const disableNextPage = computed(()=>{
  if((current * props.pageSize)>props.size){
    return true;
  }
  return false;
});

// 上一页
const previousPage = ()=>{

};

// 下一页
const nextPage = ()=>{

}

// 确认
const onConfirm = ()=>{
  dialogVisible.value = false;
  let i = props.templateList.findIndex(x=>x.contractTemplateId === radio.value);
  if(i!==-1){
    emits('onConfirm',props.templateList[i]);
  }
}
</script>

<style>
.my-dialog .el-dialog__header{
  padding:0 !important;
  margin: 0 !important;
}
.my-dialog .el-dialog__header .header-wrap{
  height: 56px !important;
  background: #F7F7FA !important;
}
</style>

<style lang="scss" scoped>
.header-wrap{
  width: 100%;
  height: 56px;
  background: #F7F7FA;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .title-name{
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #1A1A1A;
  }
  .close-icon{
    position: absolute;
    right: 28px;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
}

.dialog-content{
  height: 400px;
}

.dialog-footer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .dialog-footer-content{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-arrow-icon{
      width: 28px;
      height: 28px;
      cursor: pointer;
    }
    .button-wrap{
      margin: 0 76px;
    }
    .right-arrow-icon{
      width: 28px;
      height: 28px;
      cursor: pointer;
      transform: rotate(180deg);
    }
  }
}
</style>
